<#include "/WEB-INF/default/fragment/nev.ftl">
<div id="main">
        <div align="center"><img src="./assets/image/logo.png" alt=""></div>
    </div>
    <div class="invit">
        <span>java1605</span>
        <div class="invit_btn">
            2017/4/18
        </div>
    </div>
    <div class="team-index">
        <div class="team-member">
            <div class="frag-top">
                <span>团队成员</span>
                <div class="top-btn fr">
                    邀请成员
                </div>
            </div>
            <div class="frag-content">
                <div class="show-right">左边</div>
                <div class="member-list">
                    <ul>
                        <li>
                            <div class="member-top">
                                <div class="member-name">gxx</div>
                                <div class="member-stars">
                                    <img src="./assets/image/zan.png">
                                    <span>20</span>
                                </div>
                            </div>
                            <div class="member-content">
                                <div class="member-return">
                                    <div class="total-art">
                                        <img src="./assets/image/p-zong.png">
                                        <span>22</span>
                                    </div>
                                    <div class="total-cpl">
                                        <img src="./assets/image/complete.png">
                                        <span>20</span>
                                    </div>
                                </div>
                                <div class="member-join-date">2017-04-15加入</div>
                            </div>
                        </li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="show-left">右边</div>
            </div>
        </div>
        <div class="team-member">
            <div class="frag-top">
                <span>项目</span>
                <div class="top-btn fr">
                    添加项目
                </div>
            </div>
            <div class="frag-content">
                <div class="show-right">左边</div>
                <div class="member-list">
                    <ul>
                        <li>
                            <div class="member-top">
                                <div class="member-name">JavaSE</div>
                            </div>
                            <div class="member-content">
                                <div class="art-totals">已发布210个项目</div>
                            </div>
                        </li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="show-left">右边</div>
            </div>
        </div>
        <div class="team-member">
            <div class="frag-top">
                <span>我的任务</span>
                <div class="top-btn fr">
                    添加任务
                </div>
            </div>
            <div class="frag-content">
                <div class="show-right">左边</div>
                <div class="member-list">
                    <ul>
                        <li>
                            <div class="member-top">
                                <div class="member-name">JavaSE</div>
                            </div>
                            <div class="member-content">
                                <div class="art-totals">已发布210个项目</div>
                            </div>
                        </li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="show-left">右边</div>
            </div>
        </div>
        <div id="tooltip"></div>
        <div class="team-member">
            <div class="frag-top">
                <span>日历</span>
                <div class="top-btn fr">
                    添加任务
                </div>
            </div>
            <div class="frag-calendar">
                <div class="container">
                    <div class="row">
                        <div class="calendar-team">
                            <div class="dropdown fr">
                                <button id="data-show" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    日程情况查看
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li class="data-show-1"><a href="###">学员旷课情况</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li class="data-show-2"><a href="###">课程进度情况</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li class="data-show-3"><a href="###">项目完成情况</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li class="data-show-4"><a href="###">学员反馈情况</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li class="data-show-5"><a href="###">作业提交情况</a></li>
                                </ul>
                                <script type="text/javascript">
                                $(function() {
                                    $('#data-show').click(function(event) {
                                        if ($('.dropdown-menu').css('display') == 'none') {
                                            $('.dropdown-menu').show();
                                        } else {
                                            $('.dropdown-menu').hide();
                                        }
                                    });
                                    $('.data-show-1,.data-show-2,.data-show-3,.data-show-4,.data-show-5')
                                        .click(function(event) {
                                            $('.dropdown-menu').hide();
                                            var tname = $(this).context.className;
                                            var tbodyc = $('#mycalendar td');
                                            tbodyc.removeAttr('class');
                                            if (tname == 'data-show-1') {
                                                tbodyc.addClass('background-1');
                                            } else if (tname == 'data-show-2') {
                                                tbodyc.addClass('background-2');
                                            } else if (tname == 'data-show-3') {
                                                tbodyc.addClass('background-3');
                                            } else if (tname == 'data-show-4') {
                                                tbodyc.addClass('background-4');
                                            } else if (tname == 'data-show-5') {
                                                tbodyc.addClass('background-5');
                                            }
                                        });
                                });
                                </script>
                            </div>
                            <table id="mycalendar">
                                <thead>
                                    <tr>
                                        <th><img src="./assets/image/left.png"></th>
                                        <th colspan="5">2017年4月19日</th>
                                        <th><img src="./assets/image/right.png"></th>
                                    </tr>
                                    <tr>
                                        <th>周日</th>
                                        <th>周一</th>
                                        <th>周二</th>
                                        <th>周三</th>
                                        <th>周四</th>
                                        <th>周五</th>
                                        <th>周六</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>2</td>
                                        <td>3</td>
                                        <td>4</td>
                                        <td>5</td>
                                        <td>6</td>
                                        <td>7</td>
                                    </tr>
                                    <tr>
                                        <td>8</td>
                                        <td>9</td>
                                        <td>10</td>
                                        <td>11</td>
                                        <td>12</td>
                                        <td>13</td>
                                        <td>14</td>
                                    </tr>
                                    <tr>
                                        <td>15</td>
                                        <td>16</td>
                                        <td>17</td>
                                        <td>18</td>
                                        <td>19</td>
                                        <td>20</td>
                                        <td>21</td>
                                    </tr>
                                    <tr>
                                        <td>22</td>
                                        <td>23</td>
                                        <td>24</td>
                                        <td>25</td>
                                        <td>26</td>
                                        <td>27</td>
                                        <td>28</td>
                                    </tr>
                                    <tr>
                                        <td>29</td>
                                        <td>30</td>
                                        <td>31</td>
                                        <td>1</td>
                                        <td>2</td>
                                        <td>3</td>
                                        <td>4</td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <script type="text/javascript">
                            $(function() {
                                var date;
                                $('#mycalendar>tbody>tr').children('td').mouseenter(function(event) {
                                    date = $(this).html();
                                    $(this).css('opacity', '0.5');
                                    $(this).html('<img class="edit" src="./assets/image/edit.png" alt="编辑"><div class="task"><a href="###">任务</a></div><div class="attend"><a href="###">考勤</a></div>');
                                }).mouseleave(function(event) {
                                    $(this).css('opacity', '1');
                                    $(this).html(date);
                                });
                            });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
        $(function() {
            $('#mycalendar>tbody>tr>td').focus(function(event) {
                var old = $(this).val();
                $(this).html('<img class="edit" src="./assets/image/edit.png" alt=""><div class="task">任务</div><div class="attend">考勤</div>');
            });
        });
        </script>
    </div>
<#include "/WEB-INF/default/fragment/footer.ftl">